<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据展示</title>
    <link rel="stylesheet" href="../statics/css/wodry.css">
    <link rel="stylesheet" href="../statics/css/index.css">
    <link rel="stylesheet" href="../statics/css/public.css">

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                物流大数据展示
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">
        <div class="center-left fl">
            <div class="left-top rightTop border">
                <!--<h1 id="ceshi">数据可视化</h1>-->
                <div class="title">基本信息</div>
                <div class="top-list">
                    <p>物流信息汇总数据</p>
                    <ul id="basic-info">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>

            </div>
            <div class="left-cen rightTop border">
                <div class="title">包裹量排名</div>
                <ul class="company" id="ceshi">
                    <li class="wodryRX0">NO.1
                        湖南，包裹累计18.8万件
                    </li>
                    <br/>
                    <li class="wodryRX1">NO.2
                        河南，包裹累计16.5万件</li>
                    <br/>
                    <li class="wodryRX2">NO.3
                        贵州，包裹累计15.9万件</li>
                    <br/>
                    <li class="wodryRX3">NO.4
                        上海，包裹累计15.2万件</li>
                    <br/>
                    <li class="wodryRX4">NO.5
                        北京，包裹累计14.7万件</li>
                </ul>

            </div>
            <div class="left-bottom rightTop border">
                <div class="title">商品分类占比</div>
                <div class="bottom-b">
                    <div id="chart3" class="allnav"></div>
                </div>

            </div>
        </div>
        <div class="center-cen fl">
            <div class="cen-top rightTop border">
                <div class="top-title">
                    <ul>
                        <li>
                            <p>数量统计（个）</p>
                            <span>3</span>
                            <span>6</span>
                            <span>5</span>
                        </li>
                        <li>
                            <p>同比上升</p>
                            <span>1</span>
                            <span>3</span>
                        </li>
                    </ul>
                </div>

                <div class="top-bottom">
                    <div id="map" class="allnav" style="height: 4.4rem"></div>
                </div>


            </div>
            <div class="cen-bottom rightTop border">
                <div class="title">月统计</div>
                <div class="bottom-b">
                    <div id="chart4" class="allnav"></div>
                </div>

            </div>
        </div>
        <div class="center-right fr">
            <div class="right-top rightTop border">
                <div class="title">商品销售排行</div>

                <div class="echart wenzi">
                    <div class="gun">
                    <span>排名</span>
                    <span>商品名称</span>
                    <span>销量</span>
                </div>
                    <div id="FontScroll" class="myscroll">
                        <ul>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank1">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank2">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank3">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank4">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank5">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank6">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank7">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank8">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank9">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank10">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank11">
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix" id="sales_rank12">
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>

            </div>
            <div class="right-cen border">
                <div class="title">各平台占比</div>
                <div class="right-cen-cent">
                    <div id="chart2" class="allnav"></div>
                </div>

            </div>
            <div class="right-bottom rightTop border">
                <div class="title">全球贸易国家城市排行</div>
                <div class="chat">
                    <div id="chart5" class="allnav"></div>
                </div>

            </div>
        </div>
    </div>


</div>


<script src="../statics/js/jquery.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../statics/js/wodry.min.js"></script>
<script src="../statics/js/fontscroll.js"></script>
<script src="../statics/js/echarts.js"></script>
<script src="../statics/js/china.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
    /*$('#ceshi').wodry({

        animation: 'rotateX',

        delay: 1000,

        animationDuration: 800

    });*/
    /*window.onload = function () {
        setInterval(function () {
            var hs=document.getElementById("ceshi");
            var hstyle=hs.style.transform;
            if(hstyle=='rotateX(-360deg)'){
                //console.log(1)
                hs.style.transform='rotateX(0deg)';
                hs.style.transform='transform 500ms cubic-bezier(0.55, 0.18, 0.92, 0.46) 0s;'
            }else {
                hs.style.transform='rotateX(-360deg)';
                hs.style.transition="all 2s";
            }
        }, 5000);
    };*/
    var counter = 9000;
    var ulist=document.getElementById("ceshi").getElementsByTagName("li");
    for (var i=0;i<ulist.length;i++){
        //console.log(ulist[i].className);
        var liclass=ulist[i].className;
        var a= $('.'+liclass+'').wodry({
            animation: 'rotateX',
            delay: counter,
            animationDuration: 10000000
        });
        if(counter>705){
            counter=9000;
        }else {
            counter +=1;L
        }
        //console.log(counter);

    }

    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum	= '0'+str;
        }else{
            realNum	= str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

    function get_toplist_data(){
        $.ajax({
            url:"http://127.0.0.1:5000/bigdata/toplist",
            success:function(data){
                $("#basic-info li").eq(0).text('成交额：'+data.data[0][0]+'万');
                $("#basic-info li").eq(1).text('成交量：'+data.data[0][1]+'万件');
                $("#basic-info li").eq(2).text('在线总数：'+data.data[0][2]+'万');
                $("#basic-info li").eq(3).text('总包裹量：'+data.data[0][3]+'万');
                $("#basic-info li").eq(4).text('在线商家：'+data.data[0][4]+'万');
                $("#basic-info li").eq(5).text('已发送：'+data.data[0][5]+'万');
            },
            error:function(xhr, type, errorThrown){
            }
        });
    }
    get_toplist_data();

    function get_company_data(){
        $.ajax({
            url:"http://127.0.0.1:5000/bigdata/company",
            success:function(data){
                $(".wodryRX0").text('NO.1：'+data[0]["name"]+'，包裹累计'+data[0]["value"]+'万件');
                $(".wodryRX1").text('NO.2：'+data[1]["name"]+'，包裹累计'+data[1]["value"]+'万件');
                $(".wodryRX2").text('NO.3：'+data[2]["name"]+'，包裹累计'+data[2]["value"]+'万件');
                $(".wodryRX3").text('NO.4：'+data[3]["name"]+'，包裹累计'+data[3]["value"]+'万件');
                $(".wodryRX4").text('NO.5：'+data[4]["name"]+'，包裹累计'+data[4]["value"]+'万件');
            },
            error:function(xhr, type, errorThrown){
            }
        });
    }
    get_company_data();

        function get_rank_data(){
        $.ajax({
            url:"http://127.0.0.1:5000/bigdata/sales_rank",
            success:function(data){
                $("#sales_rank1").eq(0).html('<span><b>'+data[0][0]+'</b></span> <span>'+data[0][1]+'</span> <span>'+data[0][2]+'万</span>');
                $("#sales_rank2").eq(0).html('<span><b>'+data[1][0]+'</b></span> <span>'+data[1][1]+'</span> <span>'+data[1][2]+'万</span>');
                $("#sales_rank3").eq(0).html('<span><b>'+data[2][0]+'</b></span> <span>'+data[2][1]+'</span> <span>'+data[2][2]+'万</span>');
                $("#sales_rank4").eq(0).html('<span><b>'+data[3][0]+'</b></span> <span>'+data[3][1]+'</span> <span>'+data[3][2]+'万</span>');
                $("#sales_rank5").eq(0).html('<span><b>'+data[4][0]+'</b></span> <span>'+data[4][1]+'</span> <span>'+data[4][2]+'万</span>');
                $("#sales_rank6").eq(0).html('<span><b>'+data[5][0]+'</b></span> <span>'+data[5][1]+'</span> <span>'+data[5][2]+'万</span>');
                $("#sales_rank7").eq(0).html('<span><b>'+data[6][0]+'</b></span> <span>'+data[6][1]+'</span> <span>'+data[6][2]+'万</span>');
                $("#sales_rank8").eq(0).html('<span><b>'+data[7][0]+'</b></span> <span>'+data[7][1]+'</span> <span>'+data[7][2]+'万</span>');
                $("#sales_rank9").eq(0).html('<span><b>'+data[8][0]+'</b></span> <span>'+data[8][1]+'</span> <span>'+data[8][2]+'万</span>');
                $("#sales_rank10").eq(0).html('<span><b>'+data[9][0]+'</b></span> <span>'+data[9][1]+'</span> <span>'+data[9][2]+'万</span>');
                $("#sales_rank11").eq(0).html('<span><b>'+data[10][0]+'</b></span> <span>'+data[10][1]+'</span> <span>'+data[10][2]+'万</span>');
                $("#sales_rank12").eq(0).html('<span><b>'+data[11][0]+'</b></span> <span>'+data[11][1]+'</span> <span>'+data[11][2]+'万</span>');
                },
            error:function(xhr, type, errorThrown){
            }
        });
    }
    get_rank_data();
</script>

</body>
</html>